import React from 'react'
import styles from './styles/pageindex'
import cx from "classnames"

//这是底下最多显示的翻页个数，应该为单数
const num = 5;
/**
 *  页码公用控件
 *  需要三个属性
 *  page  当前页面(默认页面),最好用一个state来控制,
 *              从第一页开始,没有第0页
 *  pages 总共的页数
 *          page不应该>pages
 *          但是在pages=0时,可以有page=1,这个可以在无数据时显示
 *
 *  onIndex 方法   (index)=>{} 当点击了页码之后调用,
 *      上页下页首页尾页,会自动计算一个index,比如首页index=1
 *
 */
export default React.createClass({

    getIndexs:function(page,pages){
        let indexs = [];
        let center_num = (num+1)/2;
        let i;
        if(pages==0 && page==1){
            indexs=[1];
        }else if(page <= center_num){
            for(i=1;i<num+1 && i<=pages;i++){
                indexs.push(i);
            }
        }else if(page>pages-center_num){
            for(i=num-1;i>=0 && i<pages;i--){
                indexs.push(pages-i);
            }
        }else{
        	let min = page-center_num + 1;
        	for(i=0;i<num;i++){
                indexs.push(min+i);
            }
        }
        return indexs;
    },

    render:function(){
        const pages = this.props.pages || 0;
        const page = this.props.page || 1;
        const onIndex = this.props.onIndex;
        // if(!pages || page > pages)return <div/>
        let indexs =this.getIndexs(page,pages);
        let indexhtml = indexs.map(function (i,idx) {
            return <a className={page==i?'select':''} onClick={()=>onIndex(i)} key={i}>{i}</a>
        });
        return <div className={cx("page-index",this.props.className)}>
            <span>{'共'+pages+'页'}</span>
            <a className={page<=1?'disable':''} onClick={()=>{if(page>1)onIndex(1)}}>首页</a>
            <a className={page<=1?'disable':''} onClick={()=>{if(page>1)onIndex(page-1)}}>上一页</a>
            {indexhtml}
            <a className={page>=pages?'disable':''} onClick={()=>{if(page<pages)onIndex(page+1)}}>下一页</a>
            <a className={page>=pages?'disable':''} onClick={()=>{if(page<pages)onIndex(pages)}}>尾页</a>
        </div>

    }
});